<template>
  <div class="navbar-area">
    <div class="main-responsive-nav">
      <div class="main-responsive-menu">
        <div class="responsive-burger-menu d-lg-none d-block">

        </div>
      </div>
    </div>
    <div class="main-navbar">
      <nav class="navbar navbar-expand-lg navbar-light">
        <a href="../../../index.html" class="navbar-brand d-flex align-items-center">
          <img class="logo" src="/src/assets/images/logo.png" alt="image">
        </a>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">

          <div class="search-box m-auto">

          </div>
          <div class="others-options d-flex align-items-center">
            <div class="option-item">
              <a href="../../../index.html" class="home-btn"><i class="flaticon-home"></i></a>
            </div>
            <div class="option-item">
              <div class="dropdown friend-requests-nav-item">
                <a href="#" class="dropdown-bs-toggle" role="button" data-bs-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">
                  <div class="friend-requests-btn">
                    <i class="flaticon-user"></i>
                    <span>3</span>
                  </div>
                </a>
                <div class="dropdown-menu">
                  <div
                      class="friend-requests-header d-flex justify-content-between align-items-center">
                    <h3>好友申请</h3>
                    <i class="flaticon-menu"></i>
                  </div>
                  <div class="friend-requests-body" data-simplebar>
                    <div class="item d-flex align-items-center">
                      <div class="figure">
                        <a href="#"><img src="https://raw.githubusercontent.com/chengj666/picgo-images/master/202510211944639.png"
                                         class="rounded-circle" alt="image"></a>
                      </div>
                      <div
                          class="content d-flex justify-content-between align-items-center">
                        <div class="text">
                          <h4><a href="#">小熊</a></h4>
                          <span>26 粉丝</span>
                        </div>
                        <div class="btn-box d-flex align-items-center">
                          <button class="delete-btn d-inline-block me-2"
                                  data-bs-toggle="tooltip" data-bs-placement="top"
                                  title="拒绝" type="button"><i
                              class="ri-close-line"></i></button>
                          <button class="confirm-btn d-inline-block"
                                  data-bs-toggle="tooltip" data-bs-placement="top"
                                  title="同意" type="button"><i
                              class="ri-check-line"></i></button>
                        </div>
                      </div>
                    </div>

                    <!-- <div class="view-all-requests-btn">
                      <a href="friends.html" class="default-btn">显示全部申请</a>
                    </div> -->
                  </div>
                </div>
              </div>
            </div>
            <div class="option-item">
              <div class="dropdown messages-nav-item">
                <a href="#" class="dropdown-bs-toggle" role="button" data-bs-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">
                  <div class="messages-btn">
                    <i class="flaticon-email"></i>
                    <span>2</span>
                  </div>
                </a>
                <div class="dropdown-menu">
                  <div
                      class="messages-header d-flex justify-content-between align-items-center">
                    <h3>消息</h3>
                    <i class="flaticon-menu"></i>
                  </div>

                  <div class="messages-body" data-simplebar>
                    <div class="item d-flex justify-content-between align-items-center">
                      <div class="figure">
                        <a href="#"><img src="https://raw.githubusercontent.com/chengj666/picgo-images/master/202510211944639.png"
                                         class="rounded-circle" alt="image"></a>
                      </div>
                      <div class="text">
                        <h4><a href="#">张三</a></h4>
                        <span>你好，很高兴认识你</span>
                      </div>
                    </div>

                    <div class="view-all-messages-btn">
                      <a href="messages.html" class="default-btn">查看全部消息</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="option-item">
              <div class="dropdown notifications-nav-item">
                <a href="#" class="dropdown-bs-toggle" role="button" data-bs-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">
                  <div class="notifications-btn">
                    <i class="flaticon-bell"></i>
                    <span>1</span>
                  </div>
                </a>
                <div class="dropdown-menu">
                  <div
                      class="notifications-header d-flex justify-content-between align-items-center">
                    <h3>通知</h3>
                    <i class="flaticon-menu"></i>
                  </div>
                  <div class="notifications-body" data-simplebar>

                    <div class="item d-flex justify-content-between align-items-center">
                      <div class="figure">
                        <a href="#"><img src="https://raw.githubusercontent.com/chengj666/picgo-images/master/202510211944639.png"
                                         class="rounded-circle" alt="image"></a>
                      </div>
                      <div class="text">
                        <h4><a href="#">韩梅梅</a></h4>
                        <span>通过了你的好友申请</span>
                        <span class="main-color">2 天前</span>
                      </div>
                    </div>

                    <!-- <div class="view-all-notifications-btn">
                      <a href="notifications.html" class="default-btn">查看全部通知</a>
                    </div> -->
                  </div>
                </div>
              </div>
            </div>
            <div class="option-item">
              <div class="dropdown language-option">

              </div>
            </div>
            <div class="option-item">
              <div class="dropdown profile-nav-item">
                <a href="#" class="dropdown-bs-toggle" role="button" data-bs-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">
                  <div class="menu-profile">
                    <img :src="loginUserInfo.webUserInfo.headPortrait" class="rounded-circle"
                         alt="image">
                    <span class="name">{{loginUserInfo.webUserInfo.nickname}}</span>
                    <span class="status-online"></span>
                  </div>
                </a>
                <div class="dropdown-menu">

                  <ul class="profile-body">
                    <li><i class="flaticon-user"></i> <a href="my-profile.html">个人中心</a></li>

                    <li><i class="flaticon-privacy"></i> <a href="privacy.html">修改密码</a>
                    </li>
                    <li><i class="flaticon-logout"></i> <a href="login.html">退出</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </div>
    <div class="others-option-for-responsive">
      <div class="container">
        <div class="dot-menu">
          <div class="inner">
            <div class="circle circle-one"></div>
            <div class="circle circle-two"></div>
            <div class="circle circle-three"></div>
          </div>
        </div>
        <div class="container">
          <div class="option-inner">
            <div class="others-options d-flex align-items-center">
              <div class="option-item">
                <a href="../../../index.html" class="home-btn"><i class="flaticon-home"></i></a>
              </div>
              <div class="option-item">
                <div class="dropdown friend-requests-nav-item">
                  <a href="#" class="dropdown-bs-toggle" role="button"
                     data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <div class="friend-requests-btn">
                      <i class="flaticon-user"></i>
                      <span>3</span>
                    </div>
                  </a>
                  <div class="dropdown-menu">
                    <div
                        class="friend-requests-header d-flex justify-content-between align-items-center">
                      <h3> 好友申请</h3>
                      <i class="flaticon-menu"></i>
                    </div>
                    <div class="friend-requests-body">
                      <div class="item d-flex align-items-center">
                        <div class="figure">
                          <a href="#"><img src="https://raw.githubusercontent.com/chengj666/picgo-images/master/202510211944639.png"
                                           class="rounded-circle" alt="image"></a>
                        </div>
                        <div
                            class="content d-flex justify-content-between align-items-center">
                          <div class="text">
                            <h4><a href="#">Sandra Cross</a></h4>
                            <span>26 Friends</span>
                          </div>
                          <div class="btn-box d-flex align-items-center">
                            <button class="delete-btn d-inline-block me-2"
                                    data-bs-toggle="tooltip" data-bs-placement="top"
                                    title="Delete" type="button"><i
                                class="ri-close-line"></i></button>
                            <button class="confirm-btn d-inline-block"
                                    data-bs-toggle="tooltip" data-bs-placement="top"
                                    title="Confirm" type="button"><i
                                class="ri-check-line"></i></button>
                          </div>
                        </div>
                      </div>

                      <div class="view-all-requests-btn">
                        <a href="friends.html" class="default-btn">View All Requests</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="option-item">
                <div class="dropdown messages-nav-item">
                  <a href="#" class="dropdown-bs-toggle" role="button"
                     data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <div class="messages-btn">
                      <i class="flaticon-email"></i>
                      <span>2</span>
                    </div>
                  </a>
                  <div class="dropdown-menu">
                    <div
                        class="messages-header d-flex justify-content-between align-items-center">
                      <h3>Messages</h3>
                      <i class="flaticon-menu"></i>
                    </div>
                    <div class="messages-search-box">

                    </div>
                    <div class="messages-body">
                      <div class="item d-flex justify-content-between align-items-center">
                        <div class="figure">
                          <a href="#"><img src="https://raw.githubusercontent.com/chengj666/picgo-images/master/202510211944639.png"
                                           class="rounded-circle" alt="image"></a>
                        </div>
                        <div class="text">
                          <h4><a href="#">James Vanwin</a></h4>
                          <span>Hello Dear I Want Talk To You</span>
                        </div>
                      </div>

                      <div class="view-all-messages-btn">
                        <a href="messages.html" class="default-btn">View All
                          Messages</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="option-item">
                <div class="dropdown notifications-nav-item">
                  <a href="#" class="dropdown-bs-toggle" role="button"
                     data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <div class="notifications-btn">
                      <i class="flaticon-bell"></i>
                      <span>1</span>
                    </div>
                  </a>
                  <div class="dropdown-menu">
                    <div
                        class="notifications-header d-flex justify-content-between align-items-center">
                      <h3>通知</h3>
                      <i class="flaticon-menu"></i>
                    </div>
                    <div class="notifications-body">
                      <div class="item d-flex justify-content-between align-items-center">
                        <div class="figure">
                          <a href="#"><img src="https://raw.githubusercontent.com/chengj666/picgo-images/master/202510211944639.png"
                                           class="rounded-circle" alt="image"></a>
                        </div>
                        <div class="text">
                          <h4><a href="#">James Vanwin</a></h4>
                          <span>Posted A Comment On Your Status</span>
                          <span class="main-color">20 Minites Ago</span>
                        </div>
                      </div>

                      <div class="view-all-notifications-btn">
                        <a href="notifications.html" class="default-btn">View All
                          Notifications</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="option-item">
                <div class="dropdown language-option">
                  <button class="dropdown-toggle" type="button" data-bs-toggle="dropdown"
                          aria-haspopup="true" aria-expanded="false">
                    <i class="flaticon-global"></i>
                    <span class="lang-name"></span>
                  </button>
                  <div class="dropdown-menu language-dropdown-menu">

                  </div>
                </div>
              </div>
              <div class="option-item">
                <div class="dropdown profile-nav-item">
                  <a href="#" class="dropdown-bs-toggle" role="button"
                     data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <div class="menu-profile">
                      <img :src="loginUserInfo.webUserInfo.headPortrait" class="rounded-circle"
                           alt="image">
                      <span class="name">{{loginUserInfo.webUserInfo.nickname}}</span>
                      <span class="status-online"></span>
                    </div>
                  </a>
                  <div class="dropdown-menu">
                    <div class="profile-header">
                      <h3>{{loginUserInfo.webUserInfo.nickname}}</h3>
                    </div>
                    <ul class="profile-body">
                      <li><i class="flaticon-user"></i> <a href="my-profile.html">个人中心</a></li>

                      <li><i class="flaticon-privacy"></i> <a
                          href="privacy.html">修改密码</a></li>

                      <li><i class="flaticon-logout"></i> <a href="../../../index.html">退出</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref,onMounted} from "vue";
import {login} from '@/api/webUser.js'
import {ElMessage} from 'element-plus'
import router from '@/router/index.js'
import useUserStore from '@/stores/loginStore.js'


const loginUserInfo=ref({
  uid:-1,
  webUserInfo:{}
})
onMounted(() => {
  loginUserInfo.value=useUserStore().userModel
})

</script>

<style scoped>

</style>